<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>看板登录</title>
	<link rel="stylesheet" type="text/css" href="/css/login/reset.css" />
	<link rel="stylesheet" type="text/css" href="/css/login/scanboardLogin.css" />
	<link rel="stylesheet" type="text/css" href="/css/login/animsition.css" />
</head>

<body>
	<div class="wp animsition">
		<div class="boardLogin">
			<a href="#" class="logo">
				<img src="/img/login/loginLogo.png">
			</a>
			<!-- method指定表单将数据发送到http的方法， action指定表单将数据发送到/login这个url中 -->
			<!--  method="post" action="/login" -->
			<form id="loginform">
				<div class="inpGroup">
					<span class="loginIco1"></span>
					<input required autocomplete="off" type="text" name="username" id="username" placeholder="请输入您的用户名">
				</div>

				<div class="prompt">
					<p class="error username_error">账号不存在！</p>
				</div>

				<div class="inpGroup">
					<span class="loginIco2"></span>
					<input required type="password" name="password" id="password" placeholder="请输入您的密码">
				</div>

				<div class="prompt">
					<p class="error login_error">账号或密码错误！</p>
					<p class="success">登录成功！即将进入首页！</p>
				</div>

				<button class="submit">登录</button>
				<!-- <a href="#" class="animsition-link submit">登录</a> -->
			</form>
		</div>
	</div>
	<div id="particles-js"></div>
</body>
<script type="text/javascript" src="/js/login/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="/js/login/jquery.animsition.js"></script>
<script src="/js/login/particles.min.js"></script>
<script src="/js/login/app.js"></script>
<script src="/js/login/crypto-js.js"></script>

<script type="text/javascript">
	$(".animsition").animsition({
		inClass: 'fade-in',
		outClass: 'fade-out',
		inDuration: 800,
		outDuration: 1000,
		linkElement: '.animsition-link',

		loading: false,
		loadingParentElement: 'body',
		loadingClass: 'animsition-loading',
		unSupportCss: ['animation-duration',
			'-webkit-animation-duration',
			'-o-animation-duration'
		],


		overlay: false,

		overlayClass: 'animsition-overlay-slide',
		overlayParentElement: 'body'
	});
</script>





<!-- 自定义登录 -->
<script>
	// 登录错误提示
	$(function () {
		$("#username").change(function () {
			// console.log($(this).val());
			let username = $(this).val();
			$.ajax({
				url: "/checkusername",
				data: {
					username
				},
				method: "get",
				success: function (res) {
					// console.log(res);
					if (res.code == 0) {
						$(".username_error").css("display", "none");
					}
					else {
						$(".username_error").css("display", "block");
					}
				}
			})
		})
	})





	// 账号密码错误提示
	$("#loginform").submit(function (e) {
		// 阻止不输入内容直接点击登录跳转
		e.preventDefault()

		// 登录按钮可以点击
		$('[class="submit"]').attr("disabled", true)

		// 判断账号密码是否正确
		let username = $("#username").val().trim();
		let password = $("#password").val().trim();
		password = CryptoJS.MD5(password).toString();
		$.ajax({
			url: "/login",
			method: "post",
			data: { username, password },
			success: function (res) {
				if (res.code == 0) {
					$(".login_error").css("display", "none");
					$(".success").css("display", "block");
					setTimeout(function () {
						location.href = "/"
					}, 1000)

					// 登录按钮不能点击
					$('[class="submit"]').attr("disabled", false)
				}

				else {
					$(".login_error").css("display", "block");

					// 登录按钮不能点击
					$('[class="submit"]').attr("disabled", false)

				}
			}
		})
	})

</script>

</html>